<template>
  <div>
    <h1>使用内置的 fetch API 进行请求</h1>
    <div>
      <button type="button" @click="getRolePageHandler">角色分页列表</button>
      <button type="button" @click="postRolesHandler">新增角色</button>
      <button type="button" @click="putRolesByRoleID">put修改数据</button>
      <button type="button" @click="deleteRolesByids">delete:删除角色</button>
      <button type="button" @click="patchRolesStatusByRoleID">patch:更新角色状态</button>
    </div>
    <div>
      <ul>
        <li v-for="item in roles" :key="item.id">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

import {
  deleteRolesByids,
  getRolesPage,
  patchRolesStatusByRoleID,
  postRoles,
  putRolesByRoleID
} from '@/service/study5/Study5Demo1'

const roles = ref([])

const getRolePageHandler = async () => {
  const resJson = await getRolesPage()

  console.log(resJson, 'resJson')
  roles.value = resJson.data.list
}

const postRolesHandler = async () => {
  const resJson = await postRoles()
  console.log(resJson, 'resJson')
}

// const getRolePageHandlerAxiost = async () => {
//   const resJson = await getRolePageHandlerAxios()
//   console.log(resJson)
//   roles.value = resJson.data.list
// }

// get
// const fetchGetRolesList = async () => {
//   var myHeaders = new Headers()
//   myHeaders.append('User-Agent', 'Apifox/1.0.0 (https://apifox.com)')
//   myHeaders.append(
//     'Authorization',
//     'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJSW5mbyI6eyJ1c2VySWQiOjIsInVzZXJuYW1lIjoiYWRtaW4iLCJuaWNrbmFtZSI6Iuezu-e7n-euoeeQhuWRmGFkbWluIiwiZGVwdElkIjoxLCJyb2xlcyI6IkFETUlOIn0sImlzcyI6ImR5czYyMzAiLCJleHAiOjE3Mjg5MDk5MTgsIm5iZiI6MTcyODg3MzkyOCwiaWF0IjoxNzI4ODczOTE4fQ.9xhdL57Qs38Mlm0K-TCwgrQjET1ZS2jUZhIOob0-pGk'
//   )

//   let requestOptions = {
//     method: 'GET',
//     headers: myHeaders,
//     redirect: 'follow'
//   }
//   const res = await fetch(
//     'http://goapi.sanjitian.cn/api/roles/page?keywords=管理员&pageNum=1&pageSize=10',
//     requestOptions
//   )

//   console.log(res)

//   if (res.ok) {
//     const resJson = await res.json()
//     console.log(resJson, 'resJson')

//     roles.value = resJson.data.list

//     console.log(roles.value)
//   }
// }

// post

// fetchGetRolesList()
// fetchPostRoles()

// onMounted(async () => {
//   await fetchGetRolesList()
// })
</script>

<style></style>
